<template>
    <div>
        <el-row class="layout-page-heading">
            <el-col :span="16">
                <h3>新增用户</h3>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                    <el-breadcrumb-item>运营后台管理</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/system/admin/user/list' }">用户管理</el-breadcrumb-item>
                    <el-breadcrumb-item>新增用户</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="8">
                <div class="layout-page-heading-action">
                    <el-button onclick="router.go(-1)"><i class="fa fa-chevron-left"></i>返回</el-button>
                    <el-button type="primary" @click="save"><i class="fa fa-save"></i>保存</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="layout-page-box">
            <el-form label-width="160px" label-position="right" :model="user" :rules="rules" ref="user" class="search-form">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="user.account" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="user.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select
                            v-model="user.role_keys"
                            multiple
                            filterable
                            placeholder="请选择角色">
                        <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-cascader
                            change-on-select
                            :clearable="true"
                            :options="offices"
                            :props="{value: 'id',label: 'name'}"
                            v-model="user.office_keys">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="user.password" placeholder="密码"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                user: {
                    id: '',
                    account: '',
                    name: '',
                    password: '',
                    office_keys: [],
                    role_keys: []
                },
                rules: {
                    account: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ]
                },
                roles: [],
                offices: []
            }
        },
        methods: {
            save(){
                var data = {
                    id: this.$route.query.id,
                    account: this.user.account,
                    name: this.user.name,
                    password: this.user.password,
                    roles: this.user.role_keys
                }
                if (this.user.office_keys.length) {
                    data.office_id = this.user.office_keys[this.user.office_keys.length - 1]
                }

                this.$refs.user.validate((valid)=> {
                    if (valid) {

                        api.request('system/admin/user/create', data, 'POST').then((res)=> {
                            _g.toast('success', '保存成功')
                            router.go(-1)
                        })
                    }
                })

            },
            init(){
                api.request('system/admin/role/all', {}, 'POST').then((res)=> {
                    this.roles = res.data
                })
                api.request('system/admin/office/all', {}, 'POST').then((res)=> {
                    _g.trimTree(res.data)
                    this.offices = res.data;
                })
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>


</style>